<template>
  <div class="form-data-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
        <el-icon><DataAnalysis /></el-icon>
        表单数据列表
      </h2>
      <p class="page-desc">查看和管理所有表单提交的数据</p>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card class="search-card" shadow="never">
        <el-form :model="searchForm" inline>
          <el-form-item label="表单名称">
            <el-select v-model="searchForm.formName" placeholder="请选择表单" clearable style="width: 200px">
              <el-option label="请假申请表" value="leave" />
              <el-option label="报销申请表" value="reimbursement" />
              <el-option label="设备申请表" value="equipment" />
              <el-option label="意见反馈表" value="feedback" />
            </el-select>
          </el-form-item>
          <el-form-item label="提交人">
            <el-input 
              v-model="searchForm.submitter" 
              placeholder="请输入提交人姓名"
              clearable
              style="width: 180px"
            />
          </el-form-item>
          <el-form-item label="提交时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 280px"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
              <el-option label="已提交" value="submitted" />
              <el-option label="已审核" value="reviewed" />
              <el-option label="已处理" value="processed" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stats-card" shadow="hover">
            <div class="stats-content">
              <div class="stats-icon total">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ stats.total }}</div>
                <div class="stats-label">总表单数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card" shadow="hover">
            <div class="stats-content">
              <div class="stats-icon submitted">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ stats.submitted }}</div>
                <div class="stats-label">待处理</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card" shadow="hover">
            <div class="stats-content">
              <div class="stats-icon processed">
                <el-icon><Check /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ stats.processed }}</div>
                <div class="stats-label">已处理</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card" shadow="hover">
            <div class="stats-content">
              <div class="stats-icon today">
                <el-icon><Calendar /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ stats.today }}</div>
                <div class="stats-label">今日新增</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 数据列表 -->
    <div class="data-list-section">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>表单数据</span>
            <div class="header-actions">
              <el-button type="success" @click="handleExport">
                <el-icon><Download /></el-icon>
                导出数据
              </el-button>
              <el-button type="primary" @click="handleRefresh">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </div>
        </template>

        <el-table 
          :data="dataList" 
          v-loading="loading"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="formName" label="表单名称" width="150">
            <template #default="{ row }">
              <el-tag :type="getFormTypeTag(row.formName)">
                {{ getFormTypeText(row.formName) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" min-width="200" />
          <el-table-column prop="submitter" label="提交人" width="120" />
          <el-table-column prop="submitTime" label="提交时间" width="180" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTag(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="reviewer" label="审核人" width="120" />
          <el-table-column prop="reviewTime" label="审核时间" width="180" />
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="handleView(row)">
                <el-icon><View /></el-icon>
                查看
              </el-button>
              <el-button type="success" size="small" @click="handleEdit(row)">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button type="danger" size="small" @click="handleDelete(row)">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 查看详情对话框 -->
    <el-dialog 
      v-model="detailDialogVisible" 
      title="表单详情" 
      width="900px"
      :close-on-click-modal="false"
    >
      <div v-if="currentData" class="form-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="表单ID">{{ currentData.id }}</el-descriptions-item>
          <el-descriptions-item label="表单名称">
            <el-tag :type="getFormTypeTag(currentData.formName)">
              {{ getFormTypeText(currentData.formName) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="标题">{{ currentData.title }}</el-descriptions-item>
          <el-descriptions-item label="提交人">{{ currentData.submitter }}</el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ currentData.submitTime }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTag(currentData.status)">
              {{ getStatusText(currentData.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="审核人">{{ currentData.reviewer || '-' }}</el-descriptions-item>
          <el-descriptions-item label="审核时间">{{ currentData.reviewTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="表单内容" :span="2">
            <div class="form-content">
              <pre>{{ currentData.content }}</pre>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleEdit(currentData)">编辑</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  DataAnalysis, 
  Search, 
  Refresh, 
  Download, 
  View, 
  Edit, 
  Delete,
  Document,
  Clock,
  Check,
  Calendar
} from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  formName: '',
  submitter: '',
  dateRange: [],
  status: ''
})

// 分页信息
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
})

// 统计数据
const stats = reactive({
  total: 0,
  submitted: 0,
  processed: 0,
  today: 0
})

// 数据状态
const loading = ref(false)
const dataList = ref([])
const detailDialogVisible = ref(false)
const currentData = ref(null)

// 模拟数据
const mockDataList = [
  {
    id: 1,
    formName: 'leave',
    title: '请假申请 - 张三',
    submitter: '张三',
    submitTime: '2024-12-01 09:30:00',
    status: 'processed',
    reviewer: '李经理',
    reviewTime: '2024-12-01 10:30:00',
    content: '请假类型：事假\n请假时间：2024-12-02 至 2024-12-04\n请假原因：家中有事需要处理'
  },
  {
    id: 2,
    formName: 'reimbursement',
    title: '报销申请 - 李四',
    submitter: '李四',
    submitTime: '2024-12-01 11:00:00',
    status: 'submitted',
    reviewer: '',
    reviewTime: '',
    content: '报销项目：差旅费\n报销金额：1200元\n报销说明：出差期间的交通和住宿费用'
  },
  {
    id: 3,
    formName: 'equipment',
    title: '设备申请 - 王五',
    submitter: '王五',
    submitTime: '2024-12-01 14:20:00',
    status: 'reviewed',
    reviewer: '张主管',
    reviewTime: '2024-12-01 15:00:00',
    content: '设备类型：笔记本电脑\n设备配置：i7处理器，16GB内存，512GB固态硬盘\n申请原因：开发工作需要'
  }
]

// 获取数据列表
const getDataList = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    dataList.value = mockDataList
    pagination.total = mockDataList.length
    
    // 更新统计数据
    stats.total = mockDataList.length
    stats.submitted = mockDataList.filter(item => item.status === 'submitted').length
    stats.processed = mockDataList.filter(item => item.status === 'processed').length
    stats.today = 3
  } catch (error) {
    ElMessage.error('获取数据列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  getDataList()
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    formName: '',
    submitter: '',
    dateRange: [],
    status: ''
  })
  handleSearch()
}

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.size = size
  getDataList()
}

const handleCurrentChange = (current: number) => {
  pagination.current = current
  getDataList()
}

// 查看详情
const handleView = (row: any) => {
  currentData.value = row
  detailDialogVisible.value = true
}

// 编辑
const handleEdit = (_row: any) => {
  ElMessage.info('编辑功能开发中...')
}

// 删除
const handleDelete = (_row: any) => {
  ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
    getDataList()
  })
}

// 导出数据
const handleExport = () => {
  ElMessage.success('数据导出成功')
}

// 刷新
const handleRefresh = () => {
  getDataList()
}

// 工具函数
const getFormTypeTag = (type: string) => {
  const map: Record<string, string> = {
    leave: 'warning',
    reimbursement: 'info',
    equipment: 'success',
    feedback: 'primary'
  }
  return map[type] || 'default'
}

const getFormTypeText = (type: string) => {
  const map: Record<string, string> = {
    leave: '请假申请表',
    reimbursement: '报销申请表',
    equipment: '设备申请表',
    feedback: '意见反馈表'
  }
  return map[type] || '未知'
}

const getStatusTag = (status: string) => {
  const map: Record<string, string> = {
    submitted: 'warning',
    reviewed: 'info',
    processed: 'success'
  }
  return map[status] || 'default'
}

const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    submitted: '已提交',
    reviewed: '已审核',
    processed: '已处理'
  }
  return map[status] || '未知'
}

onMounted(() => {
  getDataList()
})
</script>

<style scoped lang='less'>
.form-data-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .page-header {
    margin-bottom: 20px;
    
    .page-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 8px 0;
      font-size: 24px;
      font-weight: 600;
      color: #303133;
    }
    
    .page-desc {
      margin: 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .search-section {
    margin-bottom: 20px;
    
    .search-card {
      border-radius: 8px;
      
      :deep(.el-card__body) {
        padding: 20px;
      }
    }
  }

  .stats-section {
    margin-bottom: 20px;
    
    .stats-card {
      border-radius: 8px;
      
      .stats-content {
        display: flex;
        align-items: center;
        gap: 16px;
        
        .stats-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: white;
          
          &.total {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          
          &.submitted {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }
          
          &.processed {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
          
          &.today {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }
        
        .stats-info {
          .stats-number {
            font-size: 28px;
            font-weight: 600;
            color: #303133;
            line-height: 1;
          }
          
          .stats-label {
            font-size: 14px;
            color: #909399;
            margin-top: 4px;
          }
        }
      }
    }
  }

  .data-list-section {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      
      .header-actions {
        display: flex;
        gap: 12px;
      }
    }
    
    .pagination-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #ebeef5;
    }
  }

  .form-detail {
    .form-content {
      background-color: #f8f9fa;
      padding: 12px;
      border-radius: 4px;
      border: 1px solid #e9ecef;
      
      pre {
        margin: 0;
        white-space: pre-wrap;
        font-family: inherit;
        color: #495057;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}
</style>
